<template>
  <div class="loading_pop_box">
    <div class="ld">
        <div class="loadingOne">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'poploading',
  data () {
    return {
      msg: ''
    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style scoped>
.loading_pop_box{
  position: fixed;
  top: 32%;
  left: 48%;
  width: 70px;
  height: auto;
  z-index:12;
  
  /* border: 1px solid red; */
}
.ld{
    /* border: 1px solid red; */
  /* vertical-align: baseline; */
     width: 100%;
    text-align: center;
    /* margin:60px 0; */
    font-size: 18px;
    color: rgb(53, 51, 51);
    background: rgb(6, 6, 6);
}
.loadingOne{
    width: 80px;
    height: 55px;
    margin: 0 auto;
}
.loadingOne span{
    display: inline-block;
    /* margin-top: 10px; */
    position: relative;
    top:13px;
    left: -6px;
    width: 4px;
    height: 100%;
    border-radius: 4px;
    background: rgb(250, 250, 250);
    -webkit-animation: load 1s ease infinite;
    animation: load 0.8s ease infinite;
}
@keyframes load{
    0%,100%{
        height: 20px;
        background: rgb(250, 250, 250);
    }
    50%{
        height: 40px;
        margin: -15px 0;
        background: rgb(250, 250, 250);
    }
}
.loadingOne span:nth-child(2){
    -webkit-animation-delay:0.2s;
    animation-delay:0.2s;
}
.loadingOne span:nth-child(3){
    -webkit-animation-delay:0.4s;
    animation-delay:0.4s;
}
.loadingOne span:nth-child(4){
    -webkit-animation-delay:0.6s;
    animation-delay:0.6s;
}
.loadingOne span:nth-child(5){
    -webkit-animation-delay:0.8s;
    animation-delay:0.8s;
}
</style>
